<template>
  <a-modal
    v-model:visible="visible"
    title="门店编辑"
    :width="500"
    @ok="onSave"
    @cancel="cancel"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="{ style: 'width: 100px' }"
    >
      <a-form-item label="门店名称" required name="name">
        <a-input
          v-model:value="formState.name"
          placeholder="请输入"
          :maxlength="50"
        ></a-input>
      </a-form-item>
      <a-form-item label="商铺ID" required name="shopNo">
        <a-input
          v-model:value="formState.shopNo"
          placeholder="请输入"
          :maxlength="50"
        ></a-input>
      </a-form-item>
      <a-form-item class="flex-1" label="签约时间" name="signTime" required>
        <a-date-picker
          valueFormat="YYYY-MM-DD"
          v-model:value="formState.signTime"
          placeholder="选择签约时间"
          style="width: 100%"
        />
      </a-form-item>
      <!-- <a-form-item label="总信用分" required name="totalAmount">
        <a-input
          v-model:value="formState.totalAmount"
          placeholder="请输入"
          :maxlength="128"
        ></a-input>
      </a-form-item> -->
      <a-form-item label="门店地址" name="areaCode" required>
        <a-form-item-rest>
          <div class="d-flex">
            <a-cascader
              v-model:value="formState.areaCode"
              placeholder="请选择"
              :options="areaJson"
              style="margin-right: 24px"
              @change="changeArea"
            />
            <a-input
              v-model:value="formState.address"
              placeholder="请输入详细地址"
              :maxlength="50"
            />
          </div>
        </a-form-item-rest>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { postShopUpdate, postShopDetail } from "@/api/common";
import { message } from "ant-design-vue";
import { areaJson } from "@/utils/area";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const emits = defineEmits(["ok"]);
const formRef = ref(null);
const formStateClone = {
  id: "",
  name: "",
  shopNo: "",
  signTime: undefined,
  totalAmount: "",
};
const formState = reactive({
  id: "",
  name: "",
  shopNo: "",
  signTime: undefined,
  totalAmount: "",
  areaCode: undefined,
  province: "",
  city: "",
  area: "",
  provinceId: "",
  cityId: "",
  areaId: "",
  address: "",
});
const visible = ref(false);
const rules = {
  areaCode: [
    {
      required: true,
      validator: (_rule, value) => {
        if (formState.areaCode == "" || formState.address == "") {
          return Promise.reject("地址信息不能为空");
        } else {
          return Promise.resolve();
        }
      },
    },
  ],
  // agentId: [{ required: true, message: "请选择店铺代理商编号" }],
};
const changeArea = (value, selectedOptions) => {
  const labelObj = {
    0: "province",
    1: "city",
    2: "area",
  };
  const valObj = {
    0: "provinceId",
    1: "cityId",
    2: "areaId",
  };
  selectedOptions.map((item, index) => {
    formState[labelObj[index]] = item.label;
    formState[valObj[index]] = item.value;
  });
  console.log("formState", formState);
  console.log("value, selectedOptions", value, selectedOptions);
};
watch(
  () => visible.value,
  () => {
    if (visible.value) {
      nextTick(() => {
        formRef.value.resetFields();
        if (props.data?.id) {
          // 修改
          postShopDetail({ id: props.data.id }).then((res) => {
            for (let key in formState) {
              formState[key] = res.data[key];
            }
            const valObj = {
              0: "provinceId",
              1: "cityId",
              2: "areaId",
            };
            let arr = [];
            for (let key in valObj) {
              if (res.data[valObj[key]]) {
                arr.push(res.data[valObj[key]]);
              }
            }
            formState.areaCode = arr;
          });
        } else {
          // 新增
          Object.keys(formStateClone).forEach((key) => {
            formState[key] = formStateClone[key];
          });
          console.log("formState", formState);
        }
      });
    }
  }
);

const onSave = () => {
  formRef.value
    .validate()
    .then(() => {
      postShopUpdate(formState).then(() => {
        // debugger;
        message.success("编辑成功");
        formRef.value.resetFields();
        visible.value = false;
        emits("ok");
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const cancel = () => {
  formRef.value.resetFields();
};

defineExpose({
  visible,
});
</script>

<style lang="less" scoped></style>
